<template>
    <div>
        <div class="select-box" style="height: 40px;line-height: 40px;">
            <div v-if="selected">
                <span @click="select" style="cursor: pointer;font-size: 14px">选择</span> 
            </div>
            <div v-else>
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-link class="delete" type="danger" :underline="false" @click="deleted">删除</el-link>
            </div>
        </div>
        <ul class="fontBox">
            <li v-for="item in fontList" :key="item.id">
                <img src=".././ziti1.png" alt="" srcset="">
                <span :style="{ 'font-family': item.fontFamily }">{{ item.fontName }}</span>
                <p :style="{ 'font-family': item.fontFamily }">文字的美感与您不期而遇</p>
                <el-checkbox v-if="showCheckbox" v-model="item.isChecked" @change="checkChange"></el-checkbox>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'SetMobileFont',
    data() {
        return {
            selected: true,
            checkAll: false,
            fontList: [
                { fontName: '方正准圆', fontFamily: 'FZY3K--GBK1-0', isChecked: false },
                { fontName: '阿里巴巴普惠体', fontFamily: 'AlibabaPuHuiTiR', isChecked: false }
            ],
            showCheckbox: true
        }
    },
    methods: {
        select(){
            this.selected = false
        },
        handleCheckAllChange(){

        },
        deleted(){
            this.selected = true
        },
        checkChange(){

        }
    }
}
</script>

<style lang="scss" scoped>
.fontBox{
    margin-top: 20px;
    li{
        position: relative;
        display: flex;
        justify-content: flex-start;
        height: 40px;
        line-height: 40px;
        margin-bottom: 20px;
        img{
            width: 18px;
            height: 15px;
            margin-top: 12px;
            padding: 0 10px 0 20px;
        }
        span{
            width: 350px;
        }
        p{
            font-size: 30px;
        }
        .el-checkbox{
            position: absolute;
            top: 50%;
            right: 6px;
            width: 14px;
            height: 14px;
            background-color: pink;
            transform: translateY(-50%);
            line-height: 0;
        }
    }
}
</style>